<template>
  <div class="messageBox">
    <div ref="consolar" id="console" class="console">
      <div v-if="consoeList.length == 0">暂无消息</div>
    </div>
    <div class="console-input-container">
      <input type="text" v-model="consoleInput" class="console-input">
      <button @click="sendMsg">发送</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import dayjs from 'dayjs';
import { socket } from '../socket';

const runtimeConfig = useRuntimeConfig();

let consoeList: any[] = runtimeConfig.public.consoeList || []
let consoleInput = ref("")
const sendMsg = async () => {
  const auth = await useAuth()
  consoeList.push({ message: consoleInput.value, sendPerson: auth.user.name, sendId: auth.user.id })
  window.Message({ message: consoleInput.value, sendPerson: auth.user.name, sendId: auth.user.id })
  consoleInput.value = ""
}
const consolar = ref<HTMLDivElement>()
onMounted(async () => {
  socket.on('index', async (data: any) => {
    const auth = await useAuth()
    consoeList.push(data)
    if (data.message.includes("<div>")) {
      consolar.value?.appendChild(data.message)
    } else {
      const node = document.createElement(`div`)
      node.innerHTML = `${dayjs().format('YYYY-MM-DD HH:mm:ss')} ${data.sendPerson}说：${data.message}`
      node.setAttribute('sendID', data.sendId);
      consolar.value?.appendChild(node)
    }

    // consolar.value?.scrollTop = consolar.value?.scrollHeight
  })

})
</script>
<style lang="scss" scoped>
.console-input {
  width: 100%;
}

.messageBox {
  position: relative;
  margin: auto 0 8px 8px;
  box-sizing: border-box;
}

.console-input-container {
  display: flex;
  position: absolute;
  bottom: 0;
  width: 100%;
  flex-wrap: nowrap;

  .console-input {
    flex: 1;
  }
}
</style>
